import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { Table , Modal, Menu, Icon, Button } from 'antd';
import Query from './Query';
import Toggles from '../../components/Toggles';
import styles from './index.less';
import classnames from 'classnames';
import { Link } from 'dva/router';
import DropOption  from '../../components/DropOption/DropOption';
import QueueAnim from 'rc-queue-anim';

const confirm = Modal.confirm

function List ({
  billUphold: {
    list,
    load,
    selectedRows,
    selectedRowKeys,
    record
  },
  onSearch,
  onAdd,
  onDeleteItem,
  onEditItem,
  onCreate,
  location,
  dispatch
  }) {

  const handleMenuClick = (record, e) => {
    if (e.key === '1') {
       onEditItem(record)
      // document.getElementById('xxx').click();
    } else if (e.key === '2') {
      confirm({
        title: '您确定要删除这条记录吗?',
        onOk () {
          onDeleteItem(record.id)
        },
      })
    }
  }

  function createHandler(values) {
    onCreate(values)
  }

  function getzf(num){
    if(parseInt(num) < 10){
        num = '0' +num;
    }
    return num;
  }

  function getMyDate(str){
              var oDate = new Date(str),
              oYear = oDate.getFullYear(),
              oMonth = oDate.getMonth()+1,
              oDay = oDate.getDate(),
              oHour = oDate.getHours(),
              oMin = oDate.getMinutes(),
              oSen = oDate.getSeconds(),
              oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen);//最后拼接时间
              return oTime;
          };

    //复选框
  const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        dispatch({
            type:'billUphold/save',
            payload:{record:selectedRows, selectedRowKeys}
        })
      },
        type: 'checkbox',
        selectedRowKeys:selectedRowKeys
  }

  const columns = [

    {
      title: '账单信息名称',
      dataIndex:'billName',
      key: 'billName',

    }, {
      title: '账单日',
      dataIndex: 'billDate',
      key: 'billDate',
      width: 130,
    }, {
      title: '付款方',
      dataIndex:'payerName',
      key: 'payerName',
    }, {
      title: '约定到款日',
      dataIndex:'toPayday',
      key: 'toPayday',
    }, {
      title: '约定工资发放日',
      dataIndex:'payDay',
      key: 'payDay',
    }, {
      title: '社保纳入应收总额',
      dataIndex:'insuranceWageTotal',
      key: 'insuranceWageTotal',
      render: (text) => <span>{text==1
            ? '是'
            : '否'}</span>,
    }, {
      title: '公积金纳入应收总额',
      dataIndex:'providentFundTotal',
      key: 'providentFundTotal',
      render: (text) => <span>{text==1
            ? '是'
            : '否'}</span>,
    }, {
      title: '工资纳入应收总额',
      dataIndex:'wageTotal',
      key: 'wageTotal',
      render: (text) => <span>{text==1
            ? '是'
            : '否'}</span>,
    }, {
      title: '个税纳入应收总额',
      dataIndex:'taxesTotal',
      key: 'taxesTotal',
      render: (text) => <span>{text==1
            ? '是'
            : '否'}</span>,
    }, {
      title: '创建人',
      dataIndex:'operator',
      key: 'operator',
    }, {
      title: '创建时间',
      dataIndex:'createTime',
      key: 'createTime',
      render:(text)=> text ? <span>{getMyDate(text)}</span> : ''
    }, {
      title: '变更人',
      dataIndex:'operator',
      key: 'operat',
    }, {
      title: '变更时间',
      dataIndex:'modifyTime',
      key: 'modifyTime',
      render:(text)=> text ? <span>{getMyDate(text)}</span> : ''
    }, {
      title: '是否有效',
      dataIndex: 'birth',
      key: 'birth',
      render: (text) => <span>{text==1
            ? '是'
            : '否'}</span>,
    },{
      title: '操作',
      key: 'operation',
      width: 30,
      fixed: 'right',
      render: (text, record) => {
        return <DropOption onMenuClick={e => handleMenuClick(record, e)} menuOptions={[{ key: '1', name: '修改' }, { key: '2', name: '删除' }, { key: '3', name: '作废' }, { key: '4', name: '查看' }]} />
      },
    },
  ]

  return (
    <div className="content-inner">
      <Toggles name='查询条件'>
        <Query onOk={onSearch} />
      </Toggles>
      <div style={{ padding: '5px 5px 5px 5px' }}>

          <Button onClick={onAdd} style={{ marginRight: 5}} type="primary" icon="file-add" >新增</Button>

          <Button style={{ marginRight: 13}} icon="download" >导出</Button>
      </div>
      <div style={{'background': 'white'}}>
      <QueueAnim//进场动画，每个子标签必须带 key，如果未设置 key 将不执行动画。
        type={'right'}
        delay={30}
        duration={1000}
        ease={'easeInQuart'}
      >
        <Table
          key='1'
          pagination={{
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: total => `共 ${total} 条`,
            pageSizeOptions:['5','10','15','20'],
            defaultPageSize:5,
          }}
          rowSelection={rowSelection}
          loading={load}
          dataSource={list}
          className = {styles.table}
          size={'small'}
          style={{width:'100%'}}
          rowKey={record => record.id}
          columns={columns}
          scroll={{ x:1500}}
        />
      </QueueAnim>
      </div>
    </div>
  );
}

List.propTypes = {
  billUphold: PropTypes.object.isRequired,
  onDeleteItem: PropTypes.func.isRequired,
  onEditItem: PropTypes.func.isRequired
};

export default List;
